<template>
  <div class="tabsContainer">
    <UserSelect @search="query"></UserSelect>
    <el-card body-style="padding: 22px 22px 22px 22px;"
             shadow="never">
      <div slot="header"
           class="clearfix">
        <div class="flex-between"
             style="min-width: 818px">
          <div>
            <el-button type="primary"
                       icon="el-icon-plus"
                       :disabled="isnewServices"
                       @click="openEdit()">新增服务</el-button>
            <el-button type="info"
                       icon="el-icon-delete"
                       @click="removeBatch()">批量删除</el-button>
            <el-button type="warning"
                       icon="el-icon-top"
                       :disabled=" isBatchDelisting "
                       @click="editStatusBatch(1)">批量上架</el-button>
            <el-button type="success"
                       icon="el-icon-bottom"
                       :disabled="isBatchListing"
                       @click="editStatusBatch(2)">批量下架</el-button>
          </div>
          <div class="flex-align-center">
            <div v-for="(i, j) in tabsOptions"
                 :key="j"
                 :class="currentIndex == j ? 'sel-stauts-class ' : 'stauts-class '">
              <div class="flex">
                <div @click="switchTimeTab(j)"
                     style="cursor: pointer">
                  {{ i.value }}</div>
                <div style="margin-left: 4px"
                     v-if="j !== 0">
                  <!-- 三角上 -->
                  <div @click="triangleFn('up', j)"
                       :class="
                      triangleType.type == 'up' && triangleType.index == j
                        ? 'triangle-up-active'
                        : 'triangle-up'
                    "></div>
                  <!-- 三角下 -->
                  <div @click="triangleFn('down', j)"
                       :class="
                      triangleType.type == 'down' && triangleType.index == j
                        ? 'triangle-down-active'
                        : 'triangle-down'
                    "></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 图片预览 上下架 编辑 -->

      <div class="imageList"
           v-if="packageList.length">

        <div v-for="(item, index) in packageList"
             :key="index"
             class="selectBorder"
             style="margin-left: 18px"
             @click="selectFn(index)">
          <div>

            <img class="image"
                 :src="item.rotationChart"
                 alt="" />
            <div style="padding: 10px; box-sizing: border-box">
              <div style="color: #333; font-size: 16px; margin-bottom: 8px">{{
              item.tradeName
            }}</div>
              <!-- 数据 -->
              <div class="buyNum flex-between">
                <!-- 销售数量 -->
                <div class="salesVolume"> 销量:{{Number( item.orderCount)+Number(item.virtualSales) }} </div>
                <!-- 创建时间 -->
                <div class="createTime">
                  创建时间:{{ toDateString(item.createdAt) }}
                </div>
              </div>
              <div style="color: #000; font-size: 18px">￥{{ item.servicePrice }}</div>

              <!-- 下架 商家 删除 编辑 -->
              <div class="action">
                <div class="flex-align-center">
                  <div class="selCheckbox">
                    <el-checkbox style="height: 16px"
                                 ref="myCheckbox"
                                 :disabled="item.isOffShelf ? true : false"
                                 @change="(event) => selCheckbox(event, item)"></el-checkbox>
                  </div>
                  <div class="flex">
                    <el-popconfirm title="确定需要上架？"
                                   @confirm="editStatus(item)">
                      <template v-slot:reference>
                        <div v-show="item.notGrounding == 2"
                             :class="[
                          isAllDisable ? 'grounding ' : 'grounding'
                        ]">上架</div>
                      </template>
                    </el-popconfirm>
                    <el-popconfirm title="确定需要下架？"
                                   @confirm="editStatus(item)">
                      <template v-slot:reference>
                        <div v-show="item.notGrounding == 1"
                             :class="[
                          isAllDisable ? 'offShelf ' : 'offShelf'
                        ]">下架</div>
                      </template>
                    </el-popconfirm>
                    <el-popconfirm class="ele-action"
                                   title="确定要删除该条信息？"
                                   @confirm="remove(item.id)">
                      <template v-slot:reference>
                        <div :class="[isAllDisable ? 'delete ' : 'delete']">删除</div>
                      </template>
                    </el-popconfirm>
                  </div>
                  <div :class="[isAllDisable ? 'editer ' : 'editer']"
                       @click="openEdit(item.id)">编辑</div>
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>
      <el-empty :image-size="65"
                v-else
                description="暂无数据"></el-empty>

      <!-- 分页 -->
      <el-pagination background
                     @size-change="sizeChange"
                     @current-change="currentChange"
                     layout="prev, pager, next"
                     :total="total">
      </el-pagination>
      <categoriesDrawer :data="current"
                        @done="query"
                        :drawerEditBoolen.sync="drawerEditBoolen"></categoriesDrawer>
    </el-card>
  </div>
</template>
<script>
import moment from 'moment';
import categoriesDrawer from './categoriesDrawer.vue';
import { tabsOptions, imageList } from '../constant/constant';
import UserSelect from './user-select.vue';
import {
  siteServiceDetail,
  siteServiceList,
  sitecServiceDelete,
  siteServiceModify,
  siteServiceModifyMultiple,
  siteBatchServiceDelete
} from '@/api/serviceManagement/serviceList';
export default {
  name: 'tabs',
  components: {
    // RegionsSelect
    categoriesDrawer,
    UserSelect
  },
  data () {
    return {
      selectIndex: 1,
      checked: false,
      currentIndex: 0,
      tabsOptions,
      imageList,
      drawerEditBoolen: false,
      current: null,
      // 套餐列表
      packageList: [],
      //  排序类型
      triangleType: '',
      //   多选列表
      selCheckboxArr: [],
      //   如果勾选单个全部禁用
      isAllDisable: false,
      //   批量上架
      isBatchListing: false,
      //  批量下架
      isBatchDelisting: false,
      //   新增服务删除
      isnewServices: false,

      paging: {
        page: 1,
        limit: 10
      },
      total: null
    };
  },
  computed: {
    // 是否开启响应式布局
    // styleResponsive () {
    //   return this.$store.state.theme.styleResponsive;
    // }
    // 格式化
    toDateString () {
      return function (originalDateStr) {
        const date = moment(originalDateStr);
        const formattedDate = date.format('YYYY-MM-DD');
        return formattedDate;
      };
    },
    isChecked () {
      return function (index) {
        return index === this.selectIndex;
      };
    }
  },

  activated () {
    this.query();
  },
  methods: {
    async query (value = '') {
      this.isBatchListing = false;
      this.$nextTick(() => {
        this.$refs.myCheckbox.forEach((item) => {
          console.log(item.selfModel)
          item.selfModel = false
        })
      })
      //  批量下架
      this.isBatchDelisting = false;
      //   新增服务删除
      this.isnewServices = false;
      const loading = this.$loading({ lock: true });
      const res = await siteServiceList({
        page: this.paging.page,
        limit: this.paging.limit,
        siteId: this.$store.state.site.info.id,
        ...value
      });
      console.log(res);
      loading.close();
      this.packageList = res.list;
      this.total = res.count;
    },
    selectFn (index) {
      console.log(index);
      this.selectIndex = index;
      //   this.checked = !this.checked
    },
    switchTimeTab (index) {
      this.currentIndex = index;

      console.log(index);
      this.triangleType = {};
      if (index == 1) {
        this.query({
          xlorder: 2
        });
      } else if (index == 2) {
        this.query({
          jgorder: 2
        });
      } else {
        this.query();
      }
    },
    triangleFn (value, i) {
      this.triangleType = {
        type: value,
        index: i
      };
      console.log(this.triangleType);
      if (this.triangleType.index == 1 && this.triangleType.type == 'up') {
        this.query({
          xlorder: 2
        });
      } else if (
        this.triangleType.index == 1 &&
        this.triangleType.type == 'down'
      ) {
        this.query({
          xlorder: 1
        });
      } else if (
        this.triangleType.index == 2 &&
        this.triangleType.type == 'up'
      ) {
        this.query({
          jgorder: 2
        });
      } else {
        this.query({
          jgorder: 1
        });
      }
    },
    async ModifyMultiple (ids, type) {

      const loading = this.$loading({ lock: true });

      var data = {
        ids: ids,
        data: {
          notGrounding: type
        }
      };

      const res = await siteServiceModifyMultiple(data);
      console.log(res);
      loading.close();
      this.packageList = res.list;


      (this.selCheckboxArr = []), (this.checked = false);
      this.query();
    },
    sizeChange (val) {
      console.log(val);
      this.paging.page = val;
      this.query();
    },
    // 当前页
    currentChange (val) {
      console.log(val);
      this.paging.page = val;
      this.query();
    },
    // 多选上下架
    selCheckbox (status, value) {
      console.log(status, value);
      if (status) {
        if (value.notGrounding == 1) {
          //   下架的不能点击
          const res = this.packageList.filter((item) => {
            return item.notGrounding !== 1;
          });

          res.forEach((item) => {
            this.$set(item, 'isOffShelf', true);
          });

          //  等于1 下架批量禁用
          this.isBatchDelisting = true;
          this.isBatchListing = false;
          this.isnewServices = true;
          console.log(this.selCheckboxArr);
        } else {
          //  等于2 上架架批量禁用
          this.isBatchListing = true;
          this.isBatchDelisting = false;
          this.isnewServices = true;
          // 上架的不能点击
          const res = this.packageList.filter((item) => {
            return item.notGrounding !== 2;
          });
          res.forEach((item) => {
            this.$set(item, 'isOffShelf', true);
          });
        }
        const selCheckboxValue = [value].map((item) => {
          return item.id;
          // notGrounding: item.notGrounding == 1 ? 2 : 1,
        });
        this.selCheckboxArr.push(selCheckboxValue[0]);
        this.isAllDisable = true;
      } else {
        const index = this.selCheckboxArr.findIndex((obj) => {
          return obj.id == value.id;
        });
        this.selCheckboxArr.splice(index, 1);
        console.log(this.selCheckboxArr);
        // 如果数据为[] 那么解除 禁用
        if (!this.selCheckboxArr.length) {
          this.packageList.forEach((item) => {
            this.$set(item, 'isOffShelf', false);
          });
          this.isAllDisable = false;
          this.isBatchListing = false;
          this.isBatchDelisting = false;
          this.isnewServices = false;
        }
      }
    },
    async openEdit (id) {
      console.log(id);
      if (id) {
        const res = await siteServiceDetail(id);
        this.current = res;
        // 用户余额管理
        this.drawerEditBoolen = !this.drawerEditBoolen;
      } else {
        this.drawerEditBoolen = !this.drawerEditBoolen;
        this.current = null;
      }
    },
    /* 更改状态 */
    editStatus (row) {
      console.log(this.selCheckboxArr.length);

      const loading = this.$loading({ lock: true });
      siteServiceModify({
        id: row.id,
        notGrounding: row.notGrounding == 1 ? 2 : 1,
        siteId: this.$store.state.site.info.id
      })
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.query();
        })
        .catch((e) => {
          loading.close();
          row.status = !row.status ? 1 : 2;
          this.$message.error(e.message);
        });
    },
    editStatusBatch (type) {
      if (this.selCheckboxArr.length) {
        this.ModifyMultiple(this.selCheckboxArr, type);
        console.log(this.selCheckboxArr);
      }
    },
    /* 显示分配权限 */
    openAuth (row) {
      this.current = row;
      this.showAuth = true;
    },
    /* 删除 */
    remove (id) {
      const loading = this.$loading({ lock: true });
      sitecServiceDelete(id)
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          //   this.reload();
          this.query();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch () {
      this.selection = this.selCheckboxArr;
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }

      console.log(this.selection);
      this.$confirm('确定要删除选中的信息吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          console.log(this.selection.map((d) => d.id));
          siteBatchServiceDelete(this.selection.map((d) => d.id))
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.query();
              this.selCheckboxArr = [];
              //   数据为空 状态变为可选的
              if (!this.selCheckboxArr.length) {
                this.packageList.forEach((item) => {
                  this.$set(item, 'isOffShelf', false);
                });
                this.isAllDisable = false;
                this.isBatchListing = false;
                this.isBatchDelisting = false;
                this.isnewServices = false;
              }
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => { });
    }
  }
};
</script>
<style lang="less">
.disabled {
  opacity: 0.5; /* 设置透明度为 50% 或其他合适值 */
  pointer-events: none; /* 禁止鼠标事件和交互 */
  /* 添加其他样式以反映禁用状态 */
}
.tabsContainer {
  .triangle-up {
    width: 0;
    height: 0;

    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #c0c4cc;
  }
  .triangle-up-active {
    width: 0;
    height: 0;

    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #1890ff;
  }
  .triangle-down-active {
    margin-top: 3px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #1890ff;
  }
  .triangle-down {
    margin-top: 3px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #c0c4cc;
  }
  .stauts-class,
  .sel-stauts-class {
    font-size: 14px;
    margin: 0 26px 0 26px;
    padding: 9px 0px 9px;
    line-height: 19px;
  }
  .stauts-class {
    color: #757575;
  }
  .sel-stauts-class {
    color: #1e6ceb;
    // border-bottom: 2px solid #1e6ceb;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  .imageList {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 43px;
    // width: 1381px;
    .selectBorder {
      border: 1px solid transparent;
      //   flex: 1;
      //   width: calc((100%-10) / 6);
      //   min-width: calc((100%-10) / 6);
      //   max-width: calc((100%-10) / 6);
      &:hover {
        border: 1px solid #1e6ceb;
        box-sizing: content-box;
      }

      .image {
        width: 240px;
        height: 240px;
      }
      .buyNum {
        color: #999;
        font-family: Inter;
        font-size: 12px;
        margin-bottom: 11px;
      }
      .action {
        margin-top: 8px;
        .selCheckbox {
          margin-right: 18px;
        }
        .grounding {
          cursor: pointer;
          color: #26c278;

          &::before {
            content: url('../../../../static/svg/grounding.svg');
            display: inline-block;
            vertical-align: middle;
            margin-right: 2px;
          }
          &::after {
            content: '';

            border-right: 1px solid #d9d9d9;

            padding-right: 9px;
          }
        }

        .offShelf {
          cursor: pointer;
          color: #ff0000;
          &::before {
            content: url('../../../../static/svg/offShelf.svg');
            display: inline-block;
            vertical-align: middle;
            margin-right: 2px;
          }
          &::after {
            content: '';

            border-right: 1px solid #d9d9d9;

            padding-right: 9px;
          }
        }
        .delete {
          cursor: pointer;
          &::before {
            content: url('../../../../static/svg/waste.svg');
            display: inline-block;
            vertical-align: middle;
            margin-right: 2px;
            padding-left: 9px;
          }
          &::after {
            content: '';

            border-right: 1px solid #d9d9d9;

            padding-right: 9px;
            margin-right: 2px;
          }
        }
        .editer {
          color: #1e6ceb;
          cursor: pointer;
          &::before {
            content: url('../../../../static/svg/editer.svg');
            display: inline-block;
            vertical-align: middle;
            margin-right: 2px;
            padding-left: 9px;
          }
        }
      }
    }
  }
}
</style>
